import React from 'react'

import {HashRouter,Switch,Route,Link} from 'react-router-dom'

import '../css/index.css'
import Img1 from './demo/1'
import Img2 from './demo/2'
import Img3 from './demo/3'
import Img4 from './demo/4'
import Img5 from './demo/5'
import Img6 from './demo/6'

class Index extends React.Component{
    constructor(props){
        super(props)
        this.state={
            list:['小米商城','MiUi','loT','云服务','天星数科','有品','小爱开放平台','企业团购','资质证照',
            '协议规则','下载app','智能生活','Select Location'],
            hot:['全部商品分类','小米手机','Redmi红米','电视','笔记本','家电','路由器','智能硬件','服务','社区'],
            user:'',
            conList:[{title:'公司简介',path:''},{title:'管理团队',path:'/Img2'},
            ,{title:'小米文化',path:'/Img3'},{title:'发展经历',path:'/Img4'},{title:'小米新闻',path:'/Img5'}
            ,{title:'加入小米',path:'/Img2'},{title:'投资者关系',path:'/Img5'},
            {title:'联系我们',path:'/Img1'}
            ],
            mark:'关于小米'
        }
    }
    componentDidMount(){
        // console.log(this.props.location);
        if(this.props.location.state){
            this.state.user=this.props.location.state.user
            this.setState({
                user:this.state.user
            })          
            console.log(this.state.user);  
        }
    }
    componentDidUpdate(){
        
        // console.log(this.props.location.pathname);
        let str=this.props.location.pathname
        let str1=str.substr(str.length-4,5);
        console.log(str1);
        this.state.mark=str1
        // this.setState({
        //     mark:this.state.mark
        // })
        // this.setState({
        //     mark:str1
        // })
    }
    render(){
        return(
            <HashRouter>
            <div className='index'>
                <header>
                    <div className='w'>
                        <ul>
                            {
                                this.state.list.map((item,index)=>{
                                    return <li key={index}>
                                        {item}
                                    </li>
                                })
                            }
                        </ul>
                        <span><b onClick={()=>{
                            this.props.history.push('/login')
                        }}>登录</b><b>注册</b><b>{this.state.user}</b></span>                        
                    </div>
                </header>
                <div className='hot-box'>
                    <div className='w hot'>
                        <ul>
                            {
                                this.state.hot.map((item,index)=>{
                                    return <li key={index}>
                                        {item}
                                    </li>
                                })
                            }
                        </ul>
                        <input type="text" className='search' />
                    </div>
                </div>
                <div className='content-box'>
                    <p className='w'>
                        <span>首页 /</span><span>{this.state.mark}</span>
                    </p>
                    
                    <div className='content w'>
                        <ul>
                            {
                                this.state.conList.map((item,index)=>{
                                    return <li key={index}>
                                        <Link to={item.path+'/'+item.title}>{item.title}</Link>
                                    </li>
                                })
                            }
                        </ul>
                    </div>
                    <div className='Img w'>
                        <Switch>
                            
                            <Route path="/Img2/:name" component={Img2}></Route>
                            <Route path='/Img3/:name' component={Img3}></Route>
                            <Route path='/Img4/:name' component={Img4}></Route>
                            <Route path='/Img5/:name' component={Img5}></Route>
                            <Route path='/Img6/:name' component={Img6}></Route>
                            <Route path='/' component={Img1}></Route>
                        </Switch>

                        
                    </div>
                    
                </div>

            </div>
            </HashRouter>
        )
    }
}

export default Index;